<!doctype html>
<html>
  <head>
	<title>ID Helper</title>
	<style>
	  html, body 
		min-width: 357px;
		overflow-x: hidden;
		width: 100%;
		height: 100%
		margin: 0;
		padding 0;
	  }
	  
	  .main {
		display:block;
		position:absolute;
		vertical-align: middle;
		margin: 100px auto;
		height: auto;
		min-width: 300px;
		min-height: 200px;
	  }
	  
	  label {
		display:inline-table;
		width: 200px;
	  }
		
	   .area {
			margin: 10px auto 10px auto;
			width: 100%;
	   }
	   
	   .field {
			display: block;
			text-align: center;
			margin: 4px auto 4px auto;
			min-width:400px;
	   }
	   
	  
	</style>

	<script src="js/popup.js"></script>
  </head>
  <body>
		<div class="main">
			<div class="area">
				<form>
					<div class="field">
					<label for="displayNameId" >Display Name Field ID </label>
					<input type="text" id="displayNameId" value="input_name"/>
					</div>
					<div class="field">
					<label for="idId" >ID Field ID </label>
					<input type="text" id="idId" value="input_id"/>
					</div>
				</form>
			</div>
			<div class="field">
				<input type="button" id="convertToDisplayName" value="ID to Display Name" />
				<input type="button" id="convertToId" value="Display Name to ID" />
			</div>
			
			<div id="result" class="field">
			
			</div>
		</div>
  </body>
</html>